<template>
    <div id="userRoleManager">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户角色管理</el-breadcrumb-item>
        </el-breadcrumb>

           <el-card>
             <!-- 搜索框 -->
             <el-row :gutter="21" class="opt_div">
               <el-col :span="4">
                 <el-input placeholder="请输入用户姓名" v-model="workName"  size="mini"></el-input>
               </el-col>
               <el-col :span="4">
                 <el-input placeholder="请输入用户电话" v-model="workTel"  size="mini"></el-input>
               </el-col>
               <el-col :span="4">
                 <el-select v-model="workSex" placeholder="请选择性别" size="mini">
                   <el-option label="全部" value=""></el-option>
                   <el-option label="男" value="男"></el-option>
                   <el-option label="女" value="女"></el-option>
                 </el-select>
               </el-col>
               <el-col :span="4">
                 <el-select v-model="roleId" placeholder="请选择角色" size="mini">
                   <el-option label="全部" value="100"></el-option>
                   <el-option
                       v-for="(v,index) in roleList"
                       :key="index"
                       :label="v.roleName"
                       :value="v.roleId"></el-option>
                 </el-select>
               </el-col>
               <el-col :span="4">
                 <el-button type="primary" size="mini" @click="searchUser">查询</el-button>
               </el-col>
             </el-row>

             <el-table :data="userList" border size="mini">

<!--               <el-table-column type="expand">-->
<!--                 <template slot-scope="props">-->
<!--                   <el-form label-position="left" class="demo-table-expand">-->
<!--                     <el-form-item label="用户密码">-->
<!--                       <span>{{ props.row.password }}</span>-->
<!--                     </el-form-item>-->
<!--                   </el-form>-->
<!--                 </template>-->
<!--               </el-table-column>-->

               <el-table-column type="index" width="55"></el-table-column>
               <el-table-column prop="workName" label="用户账号" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="workSex" label="用户性别" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="workIdCard" label="用户身份证号" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="workTel" label="用户电话" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column prop="creatTime" label="注册时间" ></el-table-column>
               <el-table-column prop="roleName" label="用户角色" >
                 <template slot-scope="scope">
                   <span v-if="scope.row.roleName==null">未分配角色</span>
                   <span v-else>{{scope.row.roleName}}</span>
                 </template>
               </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-setting" title="分配角色" circle size="mini" @click="editUserRoleDialog(scope.row.workId,scope.row.workName,scope.row.roleId)"></el-button>
            </template>
        </el-table-column>
       </el-table>
        <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        </el-card>

         <!-- 修改用户角色 -->
    <el-dialog title="分配用户角色" :visible.sync="dialogFormVisible" :close-on-press-escape="false">
        <div class="user_msg">
           <el-input size="mini" v-model="editWorkName">
               <template slot="prepend">用户姓名</template>
           </el-input>
        </div>
        <el-card>
             <fieldset>
                 <legend>角色信息</legend>
                 <div v-for="(v,index) in roleList" :key="index">
                     <el-radio
                      v-model="editRoleId"
                      :label="v.roleId">
                       {{v.roleName}}
                     </el-radio>
                 </div>
             </fieldset>
        </el-card>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserRole('updateDeptForm')">确 定</el-button>
        </div>
    </el-dialog>

    </div>
</template>
<script>
export default {
    name:"UserRoleManager",
    data(){
        return{
          workName:"",
          workTel:"",
          workSex:"",
          roleId:"",
          userList:[],
          pageIndex:1,
          total:0,
          pageSize:3,
          roleList:[],
          dialogFormVisible:false,

          editWorkId:"",
          editWorkName:"",
          editRoleId:"",
        }
    },
    methods:{

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        },
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageIndex = val;
        this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        },

      //查询所有用户信息
      getUserList(workName,workTel,workSex,roleId,pageIndex,pageSize){
        var params = new URLSearchParams();
        params.append("workName",workName)
        params.append("workTel",workTel)
        params.append("workSex",workSex)
        params.append("roleId",roleId)
        params.append("pageIndex",pageIndex)
        params.append("pageSize",pageSize)

        this.$axios.post("/user-info/getUserList",params).then(res=>{
          //调试 输出一下res
          console.log(res)
          this.userList=res.data.data.list
          this.total=res.data.data.total
        }).catch(err=>{
          console.log(err)
        })
      },

      //模糊查询
      searchUser(){
        this.pageIndex=1
        this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
      },

      //查询所有角色信息
      getAllRole(){
          this.$axios.post("/role-info/getALLRole").then(res=>{
              console.log(res)
              this.roleList=res.data.data
          })
      },

        editUserRoleDialog(workId,workName,roleId){
            this.editWorkId=workId;
            this.editWorkName=workName;
            this.editRoleId=roleId;
            this.dialogFormVisible=true
        },
        editUserRole(){
             this.$confirm("确定更新吗？").then(res=>{
                 this.$axios.post("/user-info/editUserRole","workId="+this.editWorkId+"&roleId="+this.editRoleId).then(res=>{
                      if (res.data.code ==200){
                            this.$message.success("更新成功")
                            this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
                            this.dialogFormVisible= false
                        } else {
                              this.$message.error(res.data.msg)
                        }
                 })
             }).catch(err=>{
                 this.$message.info("您已取消更新")
             })
        }
    },
    created(){
      this.getUserList(this.workName,this.workTel,this.workSex,this.roleId,this.pageIndex,this.pageSize)
        //查询所有角色信息
        this.getAllRole()
    },

}
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
.el-table{
    margin-top: 20px;
    margin-bottom: 20px;
}
.search_input{
    margin-left: 10px;
}
.opt_div{
    display: flex;
}
.div_btn{
    display: flex;
    justify-content: right;
    margin-top: 15px;
}
.user_msg{
    margin-bottom: 20px;
}
fieldset{
    border: 1px solid #ccc;
}
legend{
    font-size: 15px;
    font-weight: bold;
}
fieldset div{
    margin: 3px 0px;
}
</style>
